// dynamically modify the title
function getName(){
    var name = document.getElementById("name");
    name.innerHTML = "Hi: " + localStorage.getItem("UserName");
}
window.onload = function(){
    // modify header
    function isLogin(){
        if(localStorage.hasOwnProperty("UserName")){
            document.getElementById("login").style.display = 'none';
            document.getElementById("login-out").style.display = 'block';
            document.getElementById("profile").style.display = 'block';
            document.querySelector("#profile a").innerHTML = 'User: ' + localStorage.getItem('UserName');
        }
        else{
            document.getElementById("login-out").style.display = 'none';
            document.getElementById("login").style.display = 'block';
            document.getElementById("profile").style.display = 'none';
        }
    }
    isLogin();
    getName();
}